const data = {
    links: [
        {
            name: "关于我们",
            links: [
                {
                    name: "公司简介",
                    link: "",
                },
                {
                    name: "联系我们",
                    link: "",
                },
            ],
        },
        {
            name: "产品新闻",
            links: [
                {
                    name: "运营知识",
                    link: "",
                },
                {
                    name: "行业动态",
                    link: "",
                },
                {
                    name: "更新日志",
                    link: "",
                },
            ],
        },
        {
            name: "产品介绍",
            links: [
                {
                    name: "产品介绍",
                    link: "",
                },
                {
                    name: "系统功能",
                    link: "",
                },
            ],
        },
        {
            name: "旗下链接",
            links: [],
        },
    ],
    contacts: {
        name: "联系方式",
        contacts: [
            {
                label: "全国热线",
                field: "400-888-8888",
            },
            {
                label: "项目合作",
                field: "151040464466(微信)",
            },
            {
                label: "技术交流",
                field: "545922020",
            },
        ],
    },
    followUs: {
        name: "关注我们",
        src: "/footer/qr-wechat.png",
    },
    friendLinks: [] as { name: string; link: string }[],
    copyright:
        "Copyright © 2024 同城号传媒科技（大连）有限公司 版权所有 辽ICP备2022009803号-4 XML地图 pbootcms模板",
};

const Footer = () => {
    return (
        <div className="bg-[#24324F] text-[#A9B7D1]">
            <div className="max-w-6xl px-6 m-auto flex flex-col [&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:border-b-gray-600">
                <div className="w-full grid grid-cols-2 gap-y-4 phone:flex *:flex *:flex-col *:items-center phone:*:items-start [&>*:not(:last-child)]:grow *:text-sm *:gap-4 py-14">
                    {data.links.map((item, index) => (
                        <div key={index}>
                            <span className="font-medium text-base text-white">
                                {item.name}
                            </span>
                            {item.links.map((link, index) => (
                                <a key={index} href={link.link}>
                                    {link.name}
                                </a>
                            ))}
                        </div>
                    ))}
                    <div>
                        <span className="font-medium text-base text-white">
                            {data.contacts.name}
                        </span>
                        {data.contacts.contacts.map((item, index) => (
                            <div
                                key={index}
                                className="flex flex-col text-center phone:flex-row"
                            >
                                <span>{item.label}：</span>
                                <span className="text-[#679AFF]">
                                    {item.field}
                                </span>
                            </div>
                        ))}
                    </div>
                    <div className="grow-0 shrink-0">
                        <span className="font-medium text-base text-white">
                            {data.followUs.name}
                        </span>
                        <img
                            className="w-[7rem]"
                            src={data.followUs.src}
                            alt=""
                        />
                    </div>
                </div>
                <div className="py-3 text-xs">
                    <span>友情链接：</span>
                    {data.friendLinks.map((item, index) => (
                        <a key={index} href={item.link} target="_blank">
                            {item.name}
                        </a>
                    ))}
                </div>
                <div className="py-2 text-xs">{data.copyright}</div>
            </div>
        </div>
    );
};

export default Footer;
